<template>
  <el-container>
  <el-header>

  <el-breadcrumb separator="/">
  <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item><a href="/projects">项目</a></el-breadcrumb-item>
  <el-breadcrumb-item>项目详情</el-breadcrumb-item>
  </el-breadcrumb>

  <h1>项目名称</h1>
  </el-header>

  <el-container>
    <el-main>  

    <el-row>
    <h5>项目详细介绍</h5>
    </el-row>
    
    <el-row>
  <el-col :span="12">
    <el-card :body-style="{ padding: '0px' }">
      <img src="~@/assets/p1.jpg" class="image">
      <div style="padding: 14px;">
        <span>文章列表</span>
        <div class="bottom clearfix">
          
          <el-button  @click='enterFile' type="primary" class="button">进入文档</el-button>
        </div>
      </div>
    </el-card>
  </el-col>


   <el-col :span="12">
    <el-card :body-style="{ padding: '0px' }">
      <img src="~@/assets/p2.jpg" class="image">
      <div style="padding: 14px;">
        <span>页面设计</span>
        <div class="bottom clearfix">
          <el-button type="primary" class="button" @click="openPage">开始设计</el-button>
      
        </div>
      </div>
    </el-card>
  </el-col>

</el-row>



    </el-main>
  </el-container>
</el-container>
</template>

<style>
  .time {
    font-size: 13px;
    color: #999;
  }
  
  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
    height: 285px;
  }

  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }
  
  .clearfix:after {
      clear: both
  }

  h5{
    font-size: 30px;
    margin-top: 0px;
  }
</style>

<script>
export default {
  data() {
    return {
     
    };
  },
  methods:{
    openPage(){
      //跳转至原型设计页面
      setTimeout(() => {this.$router.push("/graphdesign")}, 10);
      // window.open('http://localhost:8080/graphdesign')

    },
    enterFile(){
      //跳转至项目详情页面
      setTimeout(() => {this.$router.push("/new")}, 10);
      // window.open('http://localhost:8080/new')
    }
  }
}
</script>